<template>
  <div class="charts-box">
    <template v-if="charts && charts.length">
      <div v-for="chart in charts" :key="chart.id">
        <div
          class="chart"
          :style="{
            width: `${chart.w}px`,
            height: `${chart.h}px`,
            left: `${chart.x}px`,
            top: `${chart.y}px`,
          }"
          :id="chart.comp"
          :is="compsMap[chart.comp]"
        ></div>
      </div>
    </template>
    <template v-else>
      <span>请先配置</span>
    </template>
  </div>
</template>

<script>
import Bar from "@/components/charts/bar.vue";
import Line from "@/components/charts/line.vue";
import Pie from "@/components/charts/pie.vue";
export default {
  data() {
    return {
      compsMap: {
        Bar,
        Line,
        Pie,
      },
      charts: [],
    };
  },
  created() {
    let c = localStorage.getItem("charts");
    if (c) this.charts = JSON.parse(c);
  },
  methods: {},
};
</script>
<style scoped>
.charts-box {
  min-height: calc(100vh - 100px);
  width: 100%;
  border: 1px solid #adadad;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  text-align: center;
}
.chart {
  position: absolute;
}
</style>